/**
 * Photo component, use 3 div to display:  
 * 
 * 1. Image component self( z-index: 1 ): show the image  
 * 2. Selected mask( z-index: 2 ): show the selected mask layer  
 * 3. Title mask( z-index: 3 ): show the image title layer  
 * 
 * APIs:  
 * 1. {@link PhotoList.view.Photo#toggleSelection toggleSelection}  
 * 2. {@link PhotoList.view.Photo#CancelSelection CancelSelection}  
 * 3. {@link PhotoList.view.Photo#switchShadowCls switchShadowCls}   
 * 4. {@link PhotoList.view.Photo#switchBorderRadiusCls switchBorderRadiusCls}    
 * 5. {@link PhotoList.view.Photo#switchTitle switchTitle}  
 * 6. {@link PhotoList.view.Photo#changeTitleText changeTitleText}  
 * 7. {@link PhotoList.view.Photo#ChangeSize ChangeSize}  
 * 
 * @author:		wison ye    
 * @version:	1.0
 */
Ext.define( 'PhotoList.view.Photo', {
	extend: 'Ext.Img',
	alias: 'widget.photo',
	config: {
		/*
		 * hidden before image loaded
		 */
		hidden: true,
		
		/**
		 * Controll console.log output
		 */
		enableDebug: true,
		
		showAnimation: {
			type: 'fadeIn',
			duration: 500 
		},
		
		/*
		 * Delcare in "style/PhotoList.scss"
		 */
		cls: 'Photo',
		
		/*
		 * References to selectedMask component/titleMask component/selectedIconMask component, use in "element event hanlder",
		 * use sencha framework layer component to replace "element or dom programming", make the code 
		 * simply and independent of the browser !!!
		 */
		selectedMaskRef: null,
		titleMaskRef: null,
		selectedIconMaskRef: null,
		
		/**
		 * Enable or disable UI cls: border radius effect
		 */
		showBorderRadius: true,
		
		/**
		 * Enable or disable UI cls: shadow effect
		 */
		showShadow: true,
		
		/**
		 * Enable or disable UI cls: photo title effect
		 */
		showTitle: false,
		
		/**
		 * binding {@link PhotoList.model.Photo} instance
		 */
		model: null,
		
		/**
		 * If in edit mode, tap to fire "onPhotoListSelectChanged" event, else, fire "onPhotoTaped" event 
		 */
		inEditMode: false,
		
		/**
		 * default size: width
		 */
		width: '100px',
		
		/**
		 * default size: height
		 */		 
		height: '100px',
		
		listeners: {
			load: 'onImageLoaded',
			initialize: 'onInitialize',
			tap: 'onImageTap'
		}
	},

	/*--------------------------------------------------------------------------------------------------------
	 * load event handler: show the component
	 * 
	 * @param	{Ext.Img}			imageRef
	 * @param	{Ext.EventObject}	event
	 * @param	{Object}			options
	 *--------------------------------------------------------------------------------------------------------*/
	onImageLoaded: function( imageRef, event, options ){
		if ( this.getEnableDebug() ){
			console.log( 'onImageLoaded' );
		}
		
		
		if ( this.getShowBorderRadius() ){
			this.switchBorderRadiusCls( true );
		}
		
		if ( this.getShowShadow() ){
			this.switchShadowCls( true );
		}
		
		if ( this.getShowTitle() ){
			this.switchTitle( true );
		}		
		
		this.show();
	},
	
	/*--------------------------------------------------------------------------------------------------------
	 * onInitialize, append two elements( div )
	 * 
	 * @param	{Ext.Component}	compRef
	 * @param	{Object}		options
	 *--------------------------------------------------------------------------------------------------------*/
	onInitialize: function( compRef, options ){
		 if ( this.getEnableDebug() ){
			 console.log( 'onInit' );
		 }
			 
		 if ( this.getModel() != null ){
			 this.setSrc( this.getModel().get( 'url' ) );
		 }
		 
		
		 /*
		  * title mask layer div, mask color is black, 0.4 transparent, relative to top
		  * 
		  * set line-height equal component height, so <center> can make the text centered vertically!!!
		  */
		 var titleMask = Ext.create( 'Ext.Component', {
			 width: this.getWidth(),
			 cls: 'titleMask',
			 listeners: {
			 	scope: this,
			 	tap: {
			 		fn: 'onMaskTap',
			 		element: 'element'
			 	}
			 }
		 });
		 if ( this.getModel() != null ){
			 titleMask.setHtml( this.getModel().get( 'title' ) );
		 }
		 
		 this.setTitleMaskRef( titleMask );
		 

		 /*
		  * Selected mask layer div, mask color is white, 0.5 transparent
		  */
		 var selectedMask = Ext.create( 'Ext.Component', {
			 width: this.getWidth(),
			 height: this.getHeight(),
			 cls: 'selectedMask',
			 listeners: {
			 	scope: this,
			 	tap: {
			 		fn: 'onMaskTap',
			 		element: 'element'
			 	}
			 }
		 });
		 this.setSelectedMaskRef( selectedMask );

		 /*
		  * Selected icon layer div
		  */
		 var selectedIconMask = Ext.create( 'Ext.Component', {
			 cls: 'selectedIcon',
			 listeners: {
			 	scope: this,
			 	tap: {
			 		fn: 'onMaskTap',
			 		element: 'element'
			 	}
			 }
		 });
		 this.setSelectedIconMaskRef( selectedIconMask );
		 
	
		 /*
		  * Append to photo component and hide default !!! 
		  */
		 this.element.appendChild( titleMask.element );
		 this.element.appendChild( selectedMask.element );
		 this.element.appendChild( selectedIconMask.element );
		 
		 titleMask.hide();
		 selectedMask.hide();
		 selectedIconMask.hide();
	},
	
	/*--------------------------------------------------------------------------------------------------------
	 * Selected mask tap event handler: hide itself
	 * 
	 * @param	{Ext.event.Event}	event
	 * @param	{Ext.dom.Element}	currElement
	 *--------------------------------------------------------------------------------------------------------*/
	onMaskTap: function( event, currElement ){
		 // Stop event bubbling( otherwise, onImageTap will be fire )!!!
		 event.stopPropagation();
		 
		 this.toggleSelection();
	},
	
	/*--------------------------------------------------------------------------------------------------------
	 * Image tap event handler, show selected mask( if it's hidding )
	 * 
	 * @param	{Ext.Img}			imgRef
	 * @param	{Ext.EventObject}	event
	 *--------------------------------------------------------------------------------------------------------*/
	onImageTap:  function( imgRef, event ){
		 this.toggleSelection();
	},
	
	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * Toggle photo selection:  
	 * 
	 * 1. In edit mode: toggle selection and fire "onPhotoListSelectChanged" event  
	 * 2. Not in edit mode: fire "onPhotoTaped" event  
	 */
	toggleSelection: function(){
		if ( this.getModel() == null ) return;
		
		if ( !this.getInEditMode() ){
			this.getParent().fireEvent( PhotoList.model.UserEvent.onPhotoTaped, this );
		}
		else{
			var isSelected = !this.getModel().get( 'selected' );
			 
			if ( this.getSelectedMaskRef() != null ){
				if ( isSelected )
					this.getSelectedMaskRef().show();
				else
					this.getSelectedMaskRef().hide();
			}
			
			if ( this.getSelectedIconMaskRef() != null ){
				if ( isSelected )
					this.getSelectedIconMaskRef().show();
				else
					this.getSelectedIconMaskRef().hide();
			}
	
			if ( this.getModel() != null ){
				this.getModel().set( 'selected', isSelected );
				this.getModel().commit( true );
				
				this.getParent().fireEvent( PhotoList.model.UserEvent.onPhotoListSelectChanged, this );
			}
		}
	},
	
	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * Cancel selection, but don't fire "UserEvent.onPhotoListSelectChanged" event
	 */
	CancelSelection: function(){
		if ( this.getModel() == null || !this.getModel().get( 'selected' ) ) return;
		this.getModel().set( 'selected', false );
		this.getModel().commit( true );
		 
		if ( this.getSelectedMaskRef() != null ){
			this.getSelectedMaskRef().hide();
		}
		
		if ( this.getSelectedIconMaskRef() != null ){
			this.getSelectedIconMaskRef().hide();
		}
	},

	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * enable or disable shadow cls effect
	 * 
	 * @param	{Boolean}	enableCls
	 */
	switchShadowCls: function( enableCls ){
		var targetCls = 'PhotoBoxShadow';
		
		if ( enableCls ){
			this.addCls( targetCls );
		}
		else{
			this.removeCls( targetCls );
		}
		
		if ( this.getEnableDebug() ){
//			console.log( this.getCls() );
		}
	},

	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * enable or disable border radius cls effect
	 * 
	 * @param	{Boolean}	enableCls
	 */
	switchBorderRadiusCls: function( enableCls ){
		var targetCls = 'PhotoBorderRadius';
		var selectedMaskCls = 'SelectedMaskBorderRadius';
		var titleMaskCls = 'TitleMaskBorderRadius';
		
		if ( enableCls ){
			this.addCls( targetCls );
			this.getSelectedMaskRef().addCls( selectedMaskCls );
			this.getTitleMaskRef().addCls( titleMaskCls );
		}
		else{
			this.getSelectedMaskRef().removeCls( selectedMaskCls );
			this.getTitleMaskRef().removeCls( titleMaskCls );
			this.removeCls( targetCls );
		}
		
		if ( this.getEnableDebug() ){
//			console.log( this.getCls() );
//			console.log( this.getSelectedMaskRef().getCls() );
//			console.log( this.getTitleMaskRef().getCls() );
		}
	},
	
	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * enable or disable title div
	 * 
	 * @param	{Boolean}	isShowTitle
	 */
	switchTitle: function( isShowTitle ){
		if ( isShowTitle ){
			this.getTitleMaskRef().show();
		}
		else{
			this.getTitleMaskRef().hide();
		}
	},
	
	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * Change title text
	 * 
	 * @param	{String}	newTitleText
	 */
	changeTitleText: function( newTitleText ){
		var tempContent = '<center>' + newTitleText + '</center>';
		if ( this.getModel() != null ){
			this.getModel().set( 'title' , tempContent );
			this.getModel().commit( true );
		}
		
		this.getTitleMaskRef().setHtml( tempContent ); 
	},
	
	/*--------------------------------------------------------------------------------------------------------*/
	/**
	 * Change photo size, width must equal height( for testing version )
	 * 
	 * @param	{String}	newSize For example: '100px'
	 */
	ChangeSize: function( newSize ){
		 this.setWidth( newSize );
		 this.setHeight( newSize );
		 
		 this.getSelectedMaskRef().setWidth( this.getWidth() );
		 this.getSelectedMaskRef().setHeight( this.getHeight() );
		 
		 this.getTitleMaskRef().setWidth( this.getWidth() );
	}
	 
});